<style lang="scss" scoped>
  @import '../assets/css/mixin.scss';
  .fa-lg {
    margin-right: 2vw;
  }
  .login {
    height: 100vh;
    padding-top: 35vw;
    @include bag('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3995770757,398207935&fm=26&gp=0.jpg');
    .box{
      text-align: center;
      h2 {
        margin: 0;
        position: relative;
        text-align: center;
        color: #a280b7;
        & > span{
          margin-right: 1vw;
          font-size: 8vw;
        }
      }
    }
  }
</style>

<template lang="pug">
  .login
    <!--alert-ui(:alert="ajaxData" @click="fnAlert")-->
    div.box
      h2
        span 与
        span 你
        span 相
        span 遇
      mu-form.container(ref="form" :model="formData" color="#fff")
        mu-form-item.text_l(label="用户名" prop="username" :rules="userNameRules")
          mu-text-field(v-model="formData.username" prop="username")
            span(slot="prepend")
              icon.fa-lg(icon="user")
        mu-form-item.text_l(label="密码" prop="password" :rules="passwordRules")
          mu-text-field(type="password" v-model="formData.password" prop="password")
            span(slot="prepend")
              icon.fa-lg(icon="lock")
        mu-button(color="primary" v-noClick="{ fn: submit, time: 3000}" style="width:100%") 登录
      div.container_rl.text_r
        router-link(to="/register") 马上注册
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import alertUi from '@/components/alert'
  import login_mixin from '@/utils/mixin/login'
  export default {
    name: "login",
    mixins: [login_mixin],
    computed: {
      ...mapState([]),
      ...mapGetters([]),
    },
    methods: {
      ...mapMutations([]),
      submit() {
        this.$refs.form.validate().then(result => {
          if(result) this.fnAjax('/user/login')
        })
      },
    },
    created() {
      // console.log(io);
    },
    mounted() {

    },
    components: {
      alertUi
    }
  }
</script>

